<template>
  <main>
    <van-field v-model="newPassword" type="password" clearable label="密码" placeholder="请输入不少于6位数密码"/>
    <van-field v-model="confirmPaasword" type="password" clearable label="确定密码" placeholder="请再次确认密码"/>
    <van-button 
      class="default-btn"
      @click="onSubmit"
      block>
      确认
    </van-button>
  </main>
</template>

<script>
import {mapGetters, mapActions} from 'vuex'
import { Dialog, Toast } from 'vant';
import * as Api from 'api'

export default {
  data() {
    return {
      newPassword: '',
      confirmPaasword: '',
    }
  },
  computed: {
    ...mapGetters([
      'unSetPassword',
      'user'
    ])
  },
  created() {
    this.$emit('showTabMenu', false);
    // if (!this.unSetPassword) {
    //   this.$router.push({name: 'Personal'})
    // } 
  },
  methods: {
    ...mapActions([
      'UnSetPassword',
      'GetUserInfo',
      'Token'
    ]),
    onSubmit() {
      if (this.newPassword.length < 6 || this.confirmPaasword.length < 6) {
        Toast('密码长度不能小于6位数！')
        return
      }
      if (this.newPassword !== this.confirmPaasword) {
        Toast('2次密码输入不一致！')
        return
      }
      // 已经登录
      if (this.user.id) {
        Api.SetPassword({ password: this.newPassword }).then(res => {
          Toast('密码设置成功！')
          setTimeout(() => {
            this.$router.push({name: 'Personal'})
          }, 2000)
        })
      } else {
        // 未登录
        let params = {
          password: this.newPassword,
          captcha: this.user.captcha,
          phone: this.user.phone,
        }
        Api.ResetPassword(params).then(res => {
          Toast('密码重置成功！')
          setTimeout(() => {
            this.$router.push({name: 'Login'})
          }, 2000)
        })
      }
    },
  }
}
</script>

<style scoped>
main{
  padding-top: 40px;
}
.default-btn{
  margin: 60px auto;
  width: 90%;
}
</style>
